<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>兑换编号</span>
              <el-input class="tel-value" v-model="params_list.no" placeholder="请输入兑换编号"></el-input>
            </div>
            <div class="item-inline">
              <span>用户昵称</span>
              <el-input class="tel-value" v-model="params_list.username" placeholder="请输入用户昵称"></el-input>
            </div>
            <div class="item-inline">
              <span>所在地区</span>
              <el-cascader
                class="tel-value"
                v-model="params_list.address"
                :options="options"
                :props="props"
                @change="handleChange">
              </el-cascader>
            </div>
            <!-- <div class="item-inline">
              <span>注册时间</span>
              <el-date-picker
                class="tel-value"
                v-model="params_list.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择注册时间"
                align="right">
              </el-date-picker>
            </div> -->
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          会员兑换码列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">兑换会员码</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="consumerExchangeNo" label="兑换编号" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="consumerNickname" label="用户昵称" width="120" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="consumerNo" label="用户ID" width="120" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="createAt" label="注册时间" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="consumerProvinceCity" label="所在地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="consumerExchangeCode" label="兑换码" align="center" :show-overflow-tooltip="true">
          </el-table-column> 
          <el-table-column prop="consumerExchangeValidDate" label="有效期" align="center" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 兑换码 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">会员兑换码</span>
      </div>
      <el-alert
        title="每条兑换码只能使用一次，不与其他优惠方式相同"
        type="info"
        :closable="false">
      </el-alert>
      <el-form ref="form" :rules="rules" :model="currentRow" label-width="0" class="jx-form" style="margin: 30px 0 50px;">
        <el-form-item prop="code">
          <el-input v-model="currentRow.code" placeholder="请输入会员兑换码"></el-input>
        </el-form-item>
        <el-form-item prop="tel">
          <el-input v-model="currentRow.tel" placeholder="请输入会员手机号"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="primary" @click="submit('form')">确认使用</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
      const validateNO = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入会员兑换码'));
        } else {
          if (this.$reg.isNum(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确兑换码'));
          }
        }
      }  
      const validateTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入会员手机号'));
        } else {
          if (this.$reg.isPhone(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确手机号'));
          }
        }
      }  
			return {
        https: {
          list: this.$api.user.code,
          common: this.$api.common,
        },
        boo: {
          loading: false,
          showDialog: false,
        },
        other: {
          allRow: 1,
        },
        list: '',
        params_list: {
          page: 1,
          size: 10,
          no: '',
          username: '',
          address: '',
        },
        props: {
          expandTrigger: 'click', 
          value: 'field',
          label: 'field',
        },
        options: '',
        currentRow: {},
        rules: {
          code: [{required: true, validator: validateNO, trigger: 'blur'}],
          tel: [{required: true, validator: validateTel, trigger: 'blur'}],
        }
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getAddress()
    },
		methods: {
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          consumerExchangeNo: _self.params_list.no,
          consumerNickname: _self.params_list.username,
          consumerProvinceCity: _self.params_list.address,
          orderBy: '',
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      getAddress(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.options = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.address, {}, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.currentRow = {}
        _self.boo.showDialog = true
      },
      submit(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            let params = {
              consumerExchangeCode: _self.currentRow.code,
              consumerPhone: _self.currentRow.tel
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
               }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.showDialog = false
            }
            _self.$axios.post(_self.https.list.add, params, success)            
					}else{
						return false
					} 
				})
      },      
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    .el-table 
      .cell
        .icon
          width: 16px
          height: 17px
          position: relative
          top: 4px
          margin-left: 5px
  .select-type .table-item .right span
    width: 95px
  .jx-form .el-input--small, .jx-form .el-textarea
    width: 100%
</style>
